const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  title: 'study Vue3',
  template: path.resolve(__dirname, 'public/index.html'),
});
const VueLoaderPluginConfig = new VueLoaderPlugin();
const CleanWebpackPluginConfig = new CleanWebpackPlugin();

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  entry: ['@babel/polyfill', path.resolve(__dirname, 'src/main.js')],
  output: {
    filename: '[name].[chunkhash:8].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: isProduction ? './' : '/',
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devServer: {
    compress: true,
    port: 8080,
    hot: true,
    inline: true,
    hotOnly: true,
    overlay: true,
    publicPath: '/',
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s(c|a)ss$/,
        use: ['style-loader', 'css-loader', 'scss-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              include: [path.resolve(__dirname, 'src/icons')],
              symbolId: 'icon-[name]',
            },
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              include: [path.resolve(__dirname, 'src/icons')],
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]',
                  publicPath: '/',
                },
              },
            },
          },
        ],
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]',
                  publicPath: '/',
                },
              },
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              loader: 'file-loader',
              fallback: {
                name: 'fonts/[name].[hash:7].[ext]',
                publicPath: '/',
              },
            },
          },
        ],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
    ],
  },
  plugins: [
    HtmlWebpackPluginConfig,
    VueLoaderPluginConfig,
    CleanWebpackPluginConfig,
  ],
};
